<template>
  <div class="madp-picture-info">
    <div class="chart" v-if="opinion.length > 0">
      <div class="title">投资偏好</div>
      <div id="madp-chart-pie" class="madp-pie-wrap"></div>
    </div>
    <div class="label-list">
      <template v-for="(item, idx) in labelArr">
        <div class="item cursor-pointer" v-if="!(item.type == 1 && item.list.length < 1)" :key="idx" @click="setTags(item)">
          <div class="title">
            <span>{{ item.name }}</span>
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="tags text-one-ellipsis">
            <span class="tag-none" v-if="item.list < 1">+添加标签</span>
            <span class="tag" v-for="(item1, idx1) in item.list" :key="idx1">{{ idx1 > 0 ? '、' + item1.tagName : item1.tagName }}</span>
          </div>
          <div class="tips" v-if="idx == 2">PS: 个人标签设置属于客户经理个人行为，不代表企业行为</div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons')
import * as customerDetailApi from '@/api/customer-details'
export default {
  components: {},
  data() {
    return {
      charts: '',
      opinion: [],
      opinionData: [],
      labelArr: [
        {
          type: 1,
          name: '系统标签',
          list: []
        },
        {
          type: 2,
          name: '企业标签',
          list: []
        },
        {
          type: 3,
          name: '个人标签',
          list: []
        }
      ],
      type: 1
    }
  },
  props: {
    wxUserId: {
      type: String,
      default: ''
    },
    wxExternalUserid: {
      type: String,
      default: ''
    },
    assetInfo: {
      type: Object,
      default: {}
    }
  },
  created() {},
  mounted() {
    this.getShowAssets()
    this.getCrmLabel()
    this.getEnterpriseTags()
    this.getPersonTags()
    this.getShowAssets()
  },
  activated() {
    if (this.type == 2) {
      this.getEnterpriseTags()
    } else if (this.type == 3) {
      this.getPersonTags()
    }
  },
  methods: {
    setTags(info) {
      this.type = info.type
      this.$router.push({
        path: '/customerDetail/add-tags',
        query: {
          wxUserId: this.wxUserId,
          wxExternalUserid: this.wxExternalUserid,
          type: info.type
        }
      })
    },
    // 筛选需要展示的资产信息
    getShowAssets() {
      this.opinion = []
      this.opinionData = []
      if (this.assetInfo.amPlanBal && this.assetInfo.amPlanBal != 0) {
        this.opinion.push('资管计划')
        this.opinionData.push({ value: this.assetInfo.amPlanBal, name: '资管计划', itemStyle: '#FFF62D' })
      }
      if (this.assetInfo.deptBal && this.assetInfo.deptBal != 0) {
        this.opinion.push('存款')
        this.opinionData.push({ value: this.assetInfo.deptBal, name: '存款', itemStyle: '#AFF62D' })
      }
      if (this.assetInfo.finProdBal && this.assetInfo.finProdBal != 0) {
        this.opinion.push('理财产品余额')
        this.opinionData.push({ value: this.assetInfo.finProdBal, name: '理财产品余额', itemStyle: '#8BC14B' })
      }
      if (this.assetInfo.fundBal && this.assetInfo.fundBal != 0) {
        this.opinion.push('基金余额')
        this.opinionData.push({ value: this.assetInfo.fundBal, name: '基金余额', itemStyle: '#FFA62D' })
      }
      if (this.assetInfo.insureBal && this.assetInfo.insureBal != 0) {
        this.opinion.push('保险余额')
        this.opinionData.push({ value: this.assetInfo.insureBal, name: '保险余额', itemStyle: '#ED5555' })
      }
      if (this.assetInfo.loanBal && this.assetInfo.loanBal != 0) {
        this.opinion.push('贷款余额')
        this.opinionData.push({ value: this.assetInfo.loanBal, name: '贷款余额', itemStyle: '#40A1FC' })
      }
      if (this.assetInfo.metalBal && this.assetInfo.metalBal != 0) {
        this.opinion.push('贵金属余额')
        this.opinionData.push({ value: this.assetInfo.metalBal, name: '贵金属余额', itemStyle: '#0EF14B' })
      }
      if (this.assetInfo.trustBal && this.assetInfo.trustBal != 0) {
        this.opinion.push('信托')
        this.opinionData.push({ value: this.assetInfo.trustBal, name: '信托', itemStyle: '#ED8555' })
      }
      if (this.opinion.length > 0) {
        this.$nextTick(() => {
          this.drawPieChart()
        })
      }
    },
    // 获取系统标签
    getCrmLabel() {
      customerDetailApi
        .queryCrmLabel({
          wxExternalUserid: this.wxExternalUserid, //客户id
          wxUserId: this.wxUserId //用户id
        })
        .then((res) => {
          let list = res.data.data || []
          this.labelArr[0].list = list
        })
    },
    //获取企业标签
    getEnterpriseTags() {
      customerDetailApi
        .personalBindingEnterpriseLabel({
          wxExternalUserid: this.wxExternalUserid, //客户id
          wxUserId: this.wxUserId //用户id
        })
        .then((res) => {
          this.labelArr[1].list = []
          let list = res.data.data || []
          list.map((ele) => {
            ele.tagNameList.map((ele1) => {
              ele1.tagName = ele1.name
              this.labelArr[1].list.push(ele1)
            })
          })
        })
    },
    // 获取个人标签
    getPersonTags() {
      customerDetailApi
        .personalTabSelected({
          wxExternalUserid: this.wxExternalUserid, //客户id
          wxUserId: this.wxUserId //用户id
        })
        .then((res) => {
          let list = res.data.data || []
          this.labelArr[2].list = list
        })
    },
    drawPieChart() {
      this.chartPie = echarts.init(document.getElementById('madp-chart-pie'), 'macarons')
      this.chartPie.setOption({
        //显示在上面的文字
        tooltip: {
          trigger: 'item'
          // formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          icon: 'circle',
          itemWidth: 9,
          show: true,
          data: this.opinion,
          left: 'center',
          top: 'bottom',
          orient: 'horizontal'
        },
        series: [
          {
            name: '',
            silent: true, // 是否取消 hover事件
            type: 'pie',
            // 圆圈的粗细
            radius: ['20%', '40%'],
            avoidLabelOverlap: true,
            //圆圈的位置
            center: ['50%', '40%'],
            data: this.opinionData,
            labelLine: {
              show: true
            },
            // 定义饼状图的引导线
            labelLine: {
              show: true, // 让环形引导线展示
              length: 12, //引导线第一段长度
              length2: 10, //引导线第二段长度
              lineStyle: {
                color: '#000000', //引导线颜色
                opacity: 0.45
              }
            },
            //动画持续时间：2秒
            animationDuration: 2000,
            //控制是否显示指向文字的,默认为true
            label: {
              show: true,
              //以下代码可以代表指向小文字的
              formatter: '{b}\n{d}%',
              textStyle: {
                fontSize: '12px',
                fontFamily: 'Helvetica',
                color: 'rgba(0, 0, 0, 0.65)'
              }
            },
            itemStyle: {
              color: (params) => {
                return this.opinionData[params.dataIndex].itemStyle
              }
            }
          },
          {
            name: '',
            silent: true, // 是否取消 hover事件
            type: 'pie',
            radius: ['20%', '40%'],
            avoidLabelOverlap: true,
            center: ['50%', '40%'],
            data: this.opinionData,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'center',
                  fontSize: 15,
                  fontWeight: 400,
                  align: 'center',
                  formatter: function () {
                    //指示线对应文字,百分比
                    return '投资\n偏好' //设置百分比保留几位小数
                  }
                }
              }
            }
          }
        ]
      })
    }
  }
}
</script>
<style scoped lang='scss'>
.madp-picture-info {
  .chart {
    padding: 16px;
    background: #ffffff;
    box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
    border-radius: 8px;
    .title {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2c2c2c;
    }
    .madp-pie-wrap {
      width: 100%;
      height: 300px;
      margin: 'auto';
    }
  }
  .label-list {
    margin-bottom: 16px;
    .item {
      padding: 16px;
      background: #ffffff;
      box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
      border-radius: 8px;
      margin-top: 16px;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #2c2c2c;
        }
        i {
          color: rgba(32, 32, 32, 0.4);
          font-size: 16px;
          left: 8px;
          position: relative;
        }
      }
      .tags {
        margin-top: 8px;
        width: 100%;
        background: #fafafa;
        border-radius: 4px;
        height: 30px;
        line-height: 30px;
        padding: 0 8px;
        font-size: 14px;
        .tag {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffa62d;
        }
        .tag-none {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #40a1fc;
        }
      }
      .tips {
        margin-top: 10px;
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(44, 44, 44, 0.4);
      }
    }
  }
}
</style>